<template>
  <view>
    <view class="live" v-if="isLive == 2">
      <image :src="liveInfo.headUrl" />
      <view class="livebox">
        <view class="live_title"> {{ liveInfo.description }} </view>
        <view class="live_footer">
          <view class="live_audio_box">
            <view class="live_audio">
              <view class="first"></view>
              <view class="second"></view>
              <view class="three"></view>
            </view>
            <view class="live_word">直播中</view>
          </view>
          <view class="live_btn" @click="handleClick" style="width: 150rpx">立即观看</view>
        </view>
      </view>
    </view>
    <view class="live2" v-else-if="liveNoticeInfo.status === 0">
      <image :src="liveNoticeInfo.headUrl"></image>
      <view class="livebox">
        <view class="live_title2">
          <view class="yugao_t">预告</view>
          <view class="yugao_w">{{ liveNoticeInfo.nickname }}</view>
        </view>
        <view class="live_footer2">
          <view class="live_audio_box2"> {{ liveNoticeInfo.startTime }} 开播 </view>
          <view class="live_btn" @click="handleChannelsLive" v-if="liveNoticeInfo.reservable">预约</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nowTime: Date.parse(new Date()) / 1000, //当前时间
      liveList: {}, //直播数据
      isLive: '', //直播状态
      finderUserName: 'sphyyzztGGdV',
      liveInfo: {},
      liveNoticeInfo: {},
    }
  },
  components: {},
  mounted() {
    wx.getChannelsLiveNoticeInfo({
      finderUserName: this.finderUserName,
      success: (res) => {
        this.liveNoticeInfo = res
      },
    })
    wx.getChannelsLiveInfo({
      finderUserName: this.finderUserName,
      success: (res) => {
        if (res.errMsg === 'getChannelsLiveInfo:ok') {
          this.isLive = res.status
          this.liveInfo = res
          // 返回内容
          // feedId:直播 feedId
          // nonceId:直播 nonceId
          // description:直播主题
          // status:直播状态，2直播中，3直播结束
          // headUrl:直播封面
          // nickname:视频号昵称
        }
      },
      fail: (res) => {
        console.log(res, 1444)
      },
    })
  },
  methods: {
    handleChannelsLive() {
      wx.reserveChannelsLive({
        noticeId: this.liveNoticeInfo.noticeId,
      })
    },
    handleClick() {
      const { feedId, nonceId } = this.liveInfo
      wx.openChannelsLive({
        finderUserName: this.finderUserName,
        feedId,
        nonceId,
        success: (res) => {
          console.log(res)
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.live {
  height: 180rpx;
  background-color: #248dfa1f;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  margin-top: 25rpx;
}
.live image {
  display: block;
  width: 100%;
  height: 180rpx;
}
.livebox {
  width: 70%;
  height: 180rpx;
  position: absolute;
  right: 0px;
  top: 0px;
  backdrop-filter: blur(9px);
}
.live_title {
  width: 100%;
  color: #fff;
  padding-left: 20rpx;
  padding-top: 25rpx;
}
.live_footer {
  width: 100%;
  margin-top: 40rpx;
}
.live_audio_box {
  width: 30%;
  float: left;
  height: 50rpx;
  padding-top: 10rpx;
  background-color: #eb3e81;
  margin-right: 28%;
  margin-left: 20rpx;
  overflow: hidden;
}
.live_audio {
  display: inline-block;
  float: left;
  margin-left: 15rpx;
}
.live_word {
  display: inline-block;
  font-size: 25rpx;
  color: #fff;
  margin-left: 10rpx;
  height: 30rpx;
  line-height: 30rpx;
  float: left;
}
.live_audio view {
  display: inline-block;
  width: 5rpx;
  height: 30rpx;
  line-height: 30rpx;
  margin-left: 5rpx;
  background-color: #fff;
  /* float: left; */
}
.live_btn {
  min-width: 100rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  float: left;
  border-radius: 45rpx;
  background-color: #248dfa;
  color: #fff;
  text-align: center;
}
.first {
  height: 8px;
  animation: first 0.5s linear 0s infinite alternate;
}

.second {
  height: 4px;
  animation: second 1s linear 0s infinite alternate;
}

.three {
  height: 6px;
  animation: three 0.8s linear 0s infinite alternate;
}
@keyframes first {
  0% {
    height: 4px;
  }

  50% {
    height: 8px;
  }

  100% {
    height: 10px;
  }
}

@keyframes second {
  0% {
    height: 12px;
  }

  50% {
    height: 9px;
  }

  100% {
    height: 7px;
  }
}

@keyframes three {
  0% {
    height: 14px;
  }

  50% {
    height: 12px;
  }

  100% {
    height: 10px;
  }
}
/* 直播预告 */
.live2 {
  height: 180rpx;
  background-color: #248dfa1f;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  margin-top: 25rpx;
}
.live2 image {
  display: block;
  width: 100%;
  height: 180rpx;
}
.livebox2 {
  width: 70%;
  height: 180rpx;
  position: absolute;
  right: 0px;
  top: 0px;
  backdrop-filter: blur(9px);
}
.live_title2 {
  width: 95%;
  color: #fff;
  padding-left: 20rpx;
  padding-top: 35rpx;
}
.live_footer2 {
  width: 95%;
  margin-top: 60rpx;
  display: flex;
  justify-content: space-between;
}
.live_audio_box2 {
  width: 90%;
  float: left;
  height: 50rpx;
  padding-top: 10rpx;
  margin-right: 28%;
  margin-left: 20rpx;
  overflow: hidden;
  color: #fff;
  font-size: 25rpx;
}
.yugao_t {
  display: inline-block;
  background-color: #f9e7e9;
  font-size: 26rpx;
  color: #de545c;
  text-align: center;
  height: 1.2rem;
  line-height: 1.2rem;
  float: left;
  width: 15%;
}
.yugao_w {
  display: inline-block;
  font-size: 26rpx;
  color: #fff;
  margin-left: 10rpx;
  width: 82%;
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
</style>
